<template>
  <div>
    <Modal
      v-model="modals"
      width="1000"
      scrollable
      closable
      :title="titleFrom"
      :mask-closable="false"
      :z-index="1"
      @on-cancel="handleReset"
	  @on-confirm="handleSubmit"
      @on-visible-change="visible"
    >
      <Form ref="formValidate" :model="formValidate" :label-width="110" :rules="ruleValidate" @submit.native.prevent>
        <Row type="flex" :gutter="24">
          	<Col v-bind="grid">
                <FormItem label="预约编号" prop="no">
                  <div class="add">
                    <Input v-model="formValidate.no" placeholder="请输入预约编号"></Input>
					<Button type="primary" style="margin-left: 15px;" @click="handleSubmit()">建档</Button>
                  </div>
                </FormItem>
            </Col><!--col end-->
        </Row><!--row end-->
		<Row type="flex" :gutter="24">
		  	<Col v-bind="grid">
		        <div class="user_info">
					<img class="avatar" src="../../../../assets/images/f.png"></img>
					<div class="info_defail">
						<div class="name">张三/男/31岁</div>
						<div class="property_info">
							<div class="section">
								<div class="column">
									<div class="label">病历号：</div><div class="text">1020511</div>
								</div>
								<div class="column">
									<div class="label">建档日期：</div><div class="text">2024-05-03</div>
								</div>
							</div>
							<div class="section">
								<div class="column">
									<div class="label">手机号码：</div><div class="text">17823117840</div>
								</div>
								<div class="column">
									<div class="label">推荐人：</div><div class="text">罗伟</div>
								</div>
							</div>
							<div class="section">
								<div class="column">
									<div class="label">出生日期：</div><div class="text">1990-09-02</div>
								</div>
								<div class="column">
									<div class="label">客户来源：</div><div class="text">微信小程序</div>
								</div>
							</div>
						</div>
					</div>
				</div><!--div end-->
				<!-- 就诊事项 -->
				<div class="check_info">
					<div class="top">
						<span class="red">*</span>
						<span class="title">预约类型</span>
					</div><!-- top end -->
					<div class="items">
						<div class="item" :class="{selected:c.id==item_id}" v-for="c,index of items" @click="checkItem(c)">{{c.name}}</div>
					</div>
				</div><!--check_info end-->
				
				
		    </Col><!--col end-->
			<Col v-bind="grid">
			    <div class="right_info">
			    	<div class="keshi">
						<div class="item" :class="{selected:c.id==ks_id}" v-for="c,index of keshis" @click="checkKsItem(c)">{{c.name}}</div>
					</div>
			    	<div class="doctor">
						<div class="item" :class="{selected:c.id==doc_id}" v-for="c,index of doctors" @click="checkDocItem(c)">{{c.name}}</div>
					</div>
			    	<div class="date">
						<div class="item">上午</div>
						<div class="time">
							<div class="subitem" :class="{selected:c.id==time_id}" v-for="c,index of times" @click="checkTimeItem(c)">{{c.name}}</div>
						</div>
						<div class="item">上午</div>
						<div class="time">
							<div class="subitem">1号 13:20-13:40</div>
							<div class="subitem">2号 13:40-14:00</div>
							<div class="subitem">3号 14:20-14:40</div>
							<div class="subitem">4号 14:40-15:00</div>
							<div class="subitem">5号 15:00-15:20</div>
						</div>
					</div>
			    </div>
			</Col><!--col end-->
		</Row><!--row end-->
      </Form><!--form end-->
	  <div slot="footer" class="footer">
		  <div class="reg_info"><span class="title">挂号详情：</span><span class="text">罗医生/2024-05-04</span></div>
		  <div>
			<Button @click="cancel()">取消</Button>
			<Button type="primary" @click="handleSubmit()">保存</Button>
		  </div>
	  </div>
    </Modal>
    <Modal v-model="modal12" scrollable width="600" title="图标选择" footer-hide>
      <Input
        v-model="iconVal"
        placeholder="输入关键词搜索,注意全是英文"
        clearable
        style="width: 300px"
        @on-change="upIcon(iconVal)"
        ref="search"
      />
      <div class="trees-coadd">
        <div class="scollhide">
          <div class="iconlist">
            <ul class="list-inline">
              <li class="icons-item" v-for="(item, i) in list" :key="i" :title="item.type">
                <Icon :type="item.type" @click="iconChange(item.type)" class="ivu-icon" />
              </li>
            </ul>
          </div>
        </div>
      </div>
    </Modal>
  </div>
</template>

<script>
import { saveApi} from '@/api/subscribe';
import icon from '@/utils/icon';
import { getCookies } from '@/libs/util';
export default {
  name: 'menusFrom',
  props: {
    formValidate: {
      type: Object,
      default: null,
    },
    titleFrom: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      arrs: [],
      searchRule: '',
      iconVal: '',
      grid: {
        xl: 12,
        lg: 12,
        md: 12,
        sm: 24,
        xs: 24,
      },
      modals: false,
      modal12: false,
      ruleValidate: {
		uid: [{ required: true, message: '请输入用户id', trigger: 'blur' }],
		sub_type_id: [{ required: true, message: '请输入预约类型id', trigger: 'blur' }],
		sub_item_id: [{ required: true, message: '请输入就诊事项id', trigger: 'blur' }],
		doc_uid: [{ required: true, message: '请输入医生id', trigger: 'blur' }],
		sub_time: [{ required: true, message: '请输入预约时间', trigger: 'blur' }],
		no: [{ required: true, message: '请输入预约编号', trigger: 'blur' }],
		status: [{ required: true, message: '请输入状态', trigger: 'blur' }],
      },
      types: [],
      status: [],
      citys: [],
      companys: [],
      users: [],
	  items:[{
		  id:1,
		  name:'基础眼病'
		},
		{
		  id:2,
		  name:'角塑验配'
		},
		{
		  id:3,
		  name:'斜弱视'
		},
		{
		  id:4,
		  name:'斜弱视'
		},
		{
		  id:5,
		  name:'复查'
		}
	  ],
	  item_id:0,//就诊事项
	  keshis:[
		  {
			  id:1,
			  name:'门诊部'
		  },
		  {
			  id:2,
			  name:'住院部'
		  },
	  ],
	  ks_id:0,
	  doctors:[
		  {
			  id:1,
			  name:'李好'
		  },
		  {
			  id:2,
			  name:'张振发'
		  },
	  ],
	  doc_id:0,
	  times:[
		  {
			  id:1,
			  name:'1 号13:20-13:40'
		  },
		  {
			  id:2,
			  name:'2 号13:40-14:00'
		  },
	  ],
	  time_id:0,
      valids: false,
      list: icon,
      authType: true,
      search: icon,
	  header: {},
      fileUrl: '/adminapi/file/upload_file/1',
	  files:[]
    };
  },
  watch: {
    'formValidate.header': function (n) {
      this.formValidate.is_header = n ? 1 : 0;
    },
    'formValidate.auth_type': function (n) {
      if (n === undefined) {
        n = 1;
      }
      this.authType = n === 1;
    },
    'formValidate.data': function (n) {},
  },
  computed: {
	  
  },
  methods: {
    init() {
      this.searchRule = '';
      this.arrs = [];
    },
	//就诊项目
	checkItem(row){
		this.item_id = row.id;
	},
	//科室
	checkKsItem(row){
		this.ks_id = row.id;
	},
	//医生
	checkDocItem(row){
		this.doc_id = row.id;
	},
	//时间
	checkTimeItem(row){
		this.time_id = row.id;
	},
	// 上传成功
	handleSuccess(res, file) {
	  if (res.status === 200) {
		this.files.push(res.data.data);
	    this.$Message.success(res.msg);
	  } else {
	    this.$Message.error(res.msg);
	  }
	},
	handleFormatError(file) {
		
	},
	handleMaxSize(file) {
	  this.$Message.warning('请上传文件30M以内的文件');
	},
	delFile(index){
		this.files.splice(index,1);
	},
	// 上传头部token
	getToken() {
	  this.header['Authori-zation'] = 'Bearer ' + getCookies('token');
	  console.info(this.header);
	},
    handleCreate1(val) {
      this.headerOptionsList.push({
        value: val,
        label: val,
      });
    },
    // 获取客户数据
    getAddFrom() {
		let that = this;
   //      ListCateApi()
   //      .then(async (res) => {
			// that.types = res.data['CONTRACT_TYPE'];
			// that.status = res.data['CONTRACT_STATUS'];
			// that.users = res.data['users'];
			// that.companys = res.data['companys'];
			// that.citys = res.data['citys'];
   //      })
   //      .catch((res) => {
   //        this.$Message.error(res.msg);
   //      });
    },
	cancel(){
		this.modals = false;
	},
    // 提交
    handleSubmit() {
      this.$refs['formValidate'].validate((valid) => {
        if (valid) {
          this.valids = true;
		  this.formValidate.attach = JSON.stringify(this.files);
          saveApi(this.formValidate)
            .then(async (res) => {
              this.$Message.success(res.msg);
			  this.files = [];
              this.modals = false;
              this.$emit('getList');
              this.getAddFrom();
            })
            .catch((res) => {
              this.$Message.error(res.msg);
            });
        } else {
          
			if (!this.formValidate.uid) return this.$Message.error('请输入用户id！');
			if (!this.formValidate.sub_type_id) return this.$Message.error('请输入预约类型id！');
			if (!this.formValidate.sub_item_id) return this.$Message.error('请输入就诊事项id！');
			if (!this.formValidate.doc_uid) return this.$Message.error('请输入医生id！');
			if (!this.formValidate.sub_time) return this.$Message.error('请输入预约时间！');
			if (!this.formValidate.no) return this.$Message.error('请输入预约编号！');
			if (!this.formValidate.status) return this.$Message.error('请输入状态！');
        }
      });
    },
    handleReset() {
      this.modals = false;
      this.authType = true;
      this.$refs['formValidate'].resetFields();
      this.$emit('clearFrom');
    },
  },
  created() {
    this.list = this.search;
    this.getToken();
    this.getAddFrom();
  },
};
</script>

<style scoped>
.trees-coadd {
  width: 100%;
  height: 500px;
  border-radius: 4px;
  overflow: hidden;
}
.scollhide {
  width: 100%;
  height: 100%;
  overflow: auto;
  margin-left: 18px;
  padding: 10px 0 10px 0;
  box-sizing: border-box;
}
.content {
  font-size: 12px;
}

.time {
  font-size: 12px;
  color: #2d8cf0;
}

.icons-item {
  float: left;
  margin: 6px 6px 6px 0;
  width: 53px;
  text-align: center;
  list-style: none;
  cursor: pointer;
  height: 50px;
  color: #5c6b77;
  transition: all 0.2s ease;
  position: relative;
  padding-top: 10px;
}
.icons-item .ivu-icon {
  font-size: 16px;
}
.search-rule {
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: #f2f2f2;
}
.rule {
  display: flex;
  flex-wrap: wrap;
  max-height: 700px;
  overflow: scroll;
}
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
.rule::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background-color: #f5f5f5;
}

/*定义滚动条轨道 内阴影+圆角*/
.rule::-webkit-scrollbar-track {
  border-radius: 4px;
  background-color: #f5f5f5;
}

/*定义滑块 内阴影+圆角*/
.rule::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: #555;
}
.rule-list {
  background-color: #f2f2f2;
  width: 32%;
  margin: 5px;
  border-radius: 3px;
  padding: 10px;
  color: #333;
  cursor: pointer;
  transition: all 0.1s;
}
.rule-list:hover {
  background-color: #c5d1dd;
}
.rule-list div {
  white-space: nowrap;
}
.select-rule {
  background-color: #c5d1dd;
}
.add {
  display: flex;
  align-items: center;
}
.df {
  display: flex;
  justify-content: center;
}

.file{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.file:hover{
	background-color: #edf7fe;
}
.close-bg{
	display: inline-block;
	width: 35px;
	height: 35px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	margin-right: 15px;;
}

.close-bg:hover{
	cursor: pointer;
}

.close {
	display: inline-block;
	width: 15px;
	height: 2px;
	background: red;
	transform: rotate(45deg);
}

.close::after {
	content: '';
	display: block;
	width: 15px;
	height: 2px;
	background: red;
	transform: rotate(-90deg);
}

.user_info{
	display: flex;
	border: 1px solid #dfdfdf;
	padding: 10px;
}
.user_info .avatar{
	width:50px;
	height:50px;
	border-radius: 25px;
	background-color: white;
}
.user_info .info_defail{
	display: flex;
	flex-direction: column;
	margin-left: 15px;
}

.user_info .info_defail .name{
	font-size: 20px;font-weight: bold
}
.user_info .info_defail .property_info{
	display: flex;
	flex-direction: column;
}
.user_info .info_defail .property_info .section{
	display: flex;
	flex-direction: row; 
	margin-top: 10px;
}
.user_info .info_defail .property_info .section .column{
	display: flex;
	flex-direction: row;
	width: 190px;
}
.user_info .info_defail .property_info .section .column .label{
	width: 60px;
	text-align: right;
}
/** 就诊事项 **/
.check_info{
	display: flex;
	border: 1px solid #dfdfdf;
	padding: 10px;
	margin-top: 10px;
	flex-direction: column;
}
.check_info .top{
	display: flex;
	flex-direction: row;
}
.check_info .top .red{
	color: red;
	font-size: 20px;
}
.check_info .top .title{
	font-size: 16px;
	font-weight: bold;
}
.check_info .items{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}
.check_info .items .item{
	width:49%;
	height:35px;
	text-align: center;
	line-height: 35px;
	border: 1px solid #f1f1f1;
	margin-bottom: 5px;
	cursor: pointer;
}
.check_info .items .item:hover{
	font-weight: bold;
}
.check_info .items .selected{
	color: white;
	background-color: #2d8cf0;
}
.footer{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.footer .reg_info{
	display: flex;
	flex-direction: row;
	align-items: center;
}
.footer .reg_info .title{
	font-size: 14px;
}
.footer .reg_info .text{
	font-size: 14px;
	font-weight: bold;
	color: #2d8cf0;
}
.right_info{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}
.right_info .keshi{
	border: 1px solid #dfdfdf;
	width: 33%;
	height: 318px;
	overflow-y: auto;
}
.right_info .keshi .item{
	font-size: 14px;
	padding: 5px 10px;
	border-bottom: 1px solid #dfdfdf;
	cursor: pointer;
}
.right_info .keshi .selected{
	color: white;
	background-color: #2d8cf0;
}
.right_info .doctor{
	border: 1px solid #dfdfdf;
	width: 33%;
	height: 318px;
	overflow-y: auto;
}
.right_info .doctor .item{
	font-size: 14px;
	padding: 5px 10px;
	border-bottom: 1px solid #dfdfdf;
	cursor: pointer;
}
.right_info .doctor .selected{
	color: white;
	background-color: #2d8cf0;
}

.right_info .date{
	border: 1px solid #dfdfdf;
	width: 33%;
	height: 318px;
	overflow-y: auto;
}
.right_info .date .item{
	font-size: 14px;
	padding: 5px 10px;
	border-bottom: 1px solid #dfdfdf;
	cursor: pointer;
}

.right_info .date .time{
	display: flex;
	flex-direction: column;
}
.right_info .date .time .subitem{
	font-size: 14px;
	padding: 3px 10px;
	border-bottom: 1px solid #dfdfdf;
	cursor: pointer;
}

.right_info .date .time .selected{
	color: white;
	background-color: #2d8cf0;
}
</style>
